<template>
  <div class="login-container">
    <div class="content">
      <div class="logo">
        <img src="/favicon.ico" alt="logo" />
      </div>
      <div class="title">{{ t("login.registerTitle") }}</div>
      <!-- <div class="btns">
        <button
          @click="handoffEnroll(1)"
          :class="loginTyle == 1 ? 'active' : ''"
        >
          通过手机号
        </button>
        <button
          @click="handoffEnroll(2)"
          :class="loginTyle == 2 ? 'active' : ''"
        >
          通过邮箱
        </button>
      </div> -->

      <!-- 输入框from区域 -->
      <enrollContent
        ref="loginContentRef"
        :loginTyle="loginTyle"
        :steps="steps"
        @handleGetCode="handleGetCode"
      />

      <!-- 新增功能区域 -->
      <div class="agreement-forgot" v-if="steps == 2">
        <div class="agreement">
          <el-checkbox v-model="agreementChecked" id="agreement">
            {{ t("login.agreementPrefix") }}
            《{{ t("companyIntroduction.privacyPolicy") }}》
            {{ t("login.agreementAnd") }}
            《{{ t("companyIntroduction.userAgreement") }}》
          </el-checkbox>
        </div>
        <span class="forgot"></span>
      </div>

      <button
        class="login-btn"
        @click="handleSubmit"
        :class="{ 'login-btn-active': isDisbled }"
        :disabled="!isDisbled"
      >
        {{ submitText }}
      </button>
      <div class="register" @click="goLogin">
        {{ t("login.hasAccountLogin") }}
      </div>
      <div class="back-home">
        <svg-icon name="back" class="back-home-icon" @click="goHome"></svg-icon>
        <span @click="goHome">{{ t("login.backHome") }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import enrollContent from "./components/enrollContent.vue";
import { validateEmail } from "~/utils/utils";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { $navigate } = useNuxtApp();
import { CheckEmailCode, emailRegistration } from "~/apis/web";
const { t } = useI18n();

definePageMeta({
  layout: false,
  ssr: true, // 必须为 true
});
const loginContentRef = ref(null);
const loginTyle = ref(2); // 1: 手机号注册, 2: 邮箱注册

const steps = ref(1);
const submitText = computed(() =>
  steps.value == 1 ? t("login.nextStep") : t("login.confirm")
);

// 隐私协议单选框
const agreementChecked = ref(false);

const handoffEnroll = (index) => {
  if (loginTyle.value == index) return;
  loginTyle.value = index;
  steps.value = 1;
  agreementChecked.value = false;
};
// 点击注册按钮
const handleSubmit = () => {
  if (!loginContentRef.value || !loginContentRef.value.loginForm) {
    return false;
  }
  const { loginForm } = loginContentRef.value;
  if (steps.value == 1) {
    if (loginTyle.value == 2 && !validateEmail(loginForm.email)) {
      ElMessage.error(t("login.emailInvalid"));
    } else {
      console.log("调用邮箱验证", loginForm);
      // steps.value = 2;
      CheckEmailCode({
        email: loginForm.email,
        code: loginForm.code,
        scene: 22,
      }).then((res) => {
        if (res.code == 0) {
          console.log("res", res);
          steps.value = 2;
        }
      });
    }
  } else {
    if (!loginForm.password) {
      ElMessage.error(t("login.passwordRequired"));
    } else if (!loginForm.againPassword) {
      ElMessage.error(t("login.passwordConfirmRequired"));
    } else if (loginForm.password !== loginForm.againPassword) {
      ElMessage.error(t("login.passwordMismatch"));
    } else if (!agreementChecked.value) {
      ElMessage.error(t("login.agreementRequired"));
    } else {
      console.log("调用注册接口");
      let params = {
        username: loginForm.email,
        nickname: loginForm.email,
        password: loginForm.password,
      };
      emailRegistration(params).then((res) => {
        console.log("res注册成功", res);
        if (res.code == 0) {
          ElMessage.success(t("login.registerSuccess"));
          goLogin();
        }
      });
    }
  }
};

const isDisbled = computed(() => {
  if (!loginContentRef.value || !loginContentRef.value.loginForm) {
    return false;
  }
  const { loginForm } = loginContentRef.value;
  if (loginTyle.value == 1) {
    // 手机号注册，判断手机号、密码和协议
    return !!(loginForm.phone && loginForm.code);
  } else {
    // 邮箱注册，假设需要邮箱、密码和协议
    return !!(loginForm.email && loginForm.code);
  }
});

const goLogin = () => {
  $navigate("/login");
};
// 返回首页
const goHome = () => {
  $navigate("/web");
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 574px;
    padding: 20px 70px;
    box-sizing: border-box;
    background-color: #ffffff;

    .logo {
      height: 66px;
      margin: 0 auto;
      text-align: center;
      img {
        height: 100%;
      }
    }

    .title {
      font-family: Poppins, Poppins;
      font-weight: 500;
      font-size: 26px;
      color: #111111;
      text-align: center;
      margin: 20px auto 43px;
    }

    .btns {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      button {
        border: none;
        width: 50%;
        background: #c3c3c3;
        padding: 16px 0;
        box-sizing: border-box;
        font-family: Avenir, Avenir;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
      }

      .active {
        background: #1e2021;
      }
    }

    .agreement-forgot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 24px;

      .agreement {
        display: flex;
        align-items: center;

        // 未选中时文字样式
        :deep(.el-checkbox__label) {
          font-family: Poppins, Poppins;
          font-weight: 300;
          font-size: 12px;
          color: #656c7e;
        }
      }

      .forgot {
        font-family: Poppins, Poppins;
        font-weight: 300;
        font-size: 14px;
        color: #1e2021;
        cursor: pointer;
      }
    }

    .login-btn {
      width: 100%;
      background: #d3d3d3;
      border-radius: 0px 0px 0px 0px;
      padding: 13px 0;
      box-sizing: border-box;
      border: none;
      font-family: Poppins, Poppins;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      margin-top: 40px;
      cursor: no-drop;
    }

    .login-btn-active {
      cursor: pointer;
      background: var(--theme-gradient-bg);
    }

    .register {
      font-family: Poppins, Poppins;
      font-weight: 400;
      font-size: 16px;
      color: var(--el-color-primary);
      text-align: center;
      margin-top: 16px;
      cursor: pointer;
    }

    .back-home {
      text-align: center;
      margin-top: 45px;

      .back-home-icon {
        font-size: 19px;
        margin-right: 20px;
        cursor: pointer;
      }

      span {
        font-family: Poppins, Poppins;
        font-weight: 400;
        font-size: 16px;
        color: #1e2021;
        cursor: pointer;
      }
    }
  }
}
</style>
